<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p span {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 一行就是一个p标签，先写p标签的里面的span，通过for循环生成这些span，对应i -->
        <!-- 再写外层的循环，生产多个p标签，对应j -->
    </div>
    <script>
        var arr = [
            // ['deren', 'wsh', 'qhy']
            [
                {name: 'deren', sex: 'nan'},
                {name: 'xx', sex: 'nv'},
                {name: 'wsh', sex: 'nan'}
            ],
            ['lrh','cjl']
        ];
        var str = ''
        for (var j = 1; j <= 9; j++) {
            str += '<p>';

            for (var i = 1; i <= j; i++) {
                str += "<span>" + i + " * " + j + "=" + (i * j )+ "</span>"
            }
            str += "</p>"
        }

        document.querySelector('.content').innerHTML = str;
    </script>
</body>

</html>